<template>
 <main>
  <div id="zhuti">
    <div class="left">
      <ul>
        <h2>关于机知 > 指标大全</h2>
        <h1>产品中心</h1>
        <hr>
        <li v-on:click="video=1">指标大全</li>
        <hr>
        <li v-on:click="video=2">机制软件</li>
        <hr>
        <li v-on:click="video=3">会员中心</li>
        <hr>
        <li v-on:click="video=4">软件制定</li>
      </ul>
      <Zhibiao v-if="video===1"></Zhibiao>
      <Jizhi v-if="video===2"></Jizhi>
      <Huiyuan v-else-if="video===3"></Huiyuan>
      <Ruanjiandingzhi v-else-if="video===4"></Ruanjiandingzhi>
      <div class="clear"></div>
    </div>
      
  </div>
 </main>
</template>
<script>

import Zhibiao from './Zhibiao.vue'
import Jizhi from './Jizhi.vue'
import Huiyuan from './Huiyuan'
import Ruanjiandingzhi from './Ruanjiandingzhi'

export default {
  components: { Zhibiao,Jizhi,Huiyuan,Ruanjiandingzhi},
  data(){
    return{
      video:1
    }
  }
}
</script>
<style>
#zhuti{
  background:rgb(242,242,242);
  padding-bottom:100px;  
}
.left{
  margin: 0 auto;
  width:80%;
  position: relative;
}
.left>ul{
    float: left;
    width: 17%;
    font-size: 10px;
    margin-top: 10%;
}
li{
    list-style: none;
    font-size: 16px;
    line-height: 40px;
    background: white;
    border-bottom: 1px solid #dadade;
    padding: 5px 0 5px 15px;
}
.clear{
  clear: both;
}

</style>